/* global settings */
:root {
    --primary-color:#fff;
    --dark-color:#5bc774;
}

/*@import url('https://fonts.googleapis.com/css2?family=Poppins:wgt@400;700&display=swap');*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
   
   /* background: #c0f5cc; */ 
    color: #000;
    font-size: 15px;
    line-height: 1.5;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

a {
    color: #262626;
    text-decoration: none;
}

img {
    max-width: 100%;
}

ul {
    list-style: none;
}

/* end global settings section */

/* utillity items */

.btn {
    cursor: pointer;
    display: inline-block;
    border: 0;
    font-weight: bold;
    padding: 10px 20px;
    background: #262626;
    color: #fff;
    font-size: 15px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
    border-radius: 10px;
     
 }

 .btn:hover {
     opacity: 0.9;
     transform: scale(0.98);
 }

.menu-btn {
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 2;
    display: none;

}

.bold {
    font-weight:bolder;
}

.bold-font {
    font-size: 17px;
}

.sm-print {
    font-size: 12px;
    font-weight: lighter;
    font-style: italic;
    
    
}

.dark {
    color:#fff;

}

.db {
    background: #00b029;
}

.dark .btn {
    background: #00b029;
    color: #000;
}

.text-xl {
    font-size: 36px;
    margin-bottom: 15px;
}

.text-lg {
    font-size: 30px;
    margin-bottom: 15px;
}

.text-center {
    text-align: center;
}

.text-dark {
    color: #00b029;
} 

.top-padding {
    padding-top: 10px;
}

/* end utillity items */

/* nave bars */
.navcontainer {
    width: 90%;
    max-width: 1500px;
    margin: auto;
    
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 65px;
    padding: 20px 10px;
    font-size: 25px;
    color: #fff;
    margin-top: 50px;
    background: #262626;
    
    
}

.main-nav .logo {
    width: 180px;
    
    
}

.logo {
    transform: translateX(-20px);
}
.main-nav h1 {
    padding-left: 20px;
    font-size: 50px;
}

.main-nav ul {
    display: flex;
    justify-content: flex-end;
    
}

.main-nav ul li {
    padding: 0 10px;
   
}

.main-nav ul li a {
    padding-bottom: 2px;
    color: #fff;
    
   
}

.main-nav ul li a:hover {
    border-bottom: 2px solid #00b029;
}

.main-nav ul.main-menu {
    flex: 1;
    margin-left: 20px;
    
}


/* end nav section */

/* showcase section */
.showcase {
    width: 100%;
    height: 500px;
    background: url('/img/showcase.jpg') no-repeat center center/cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    padding-bottom: 50px;
    margin-bottom: 20px;
    margin-top: 50px;
}

.showcase h1 {
    font-size: 50px;
    
    
    
}

.showcase h1, .showcase h2, .showcase p {
    margin-bottom: 10px;
    padding: 4vh 1vh 0 1vh;
    line-height: 100%;
    -webkit-text-stroke:1px black;
    text-shadow: 0.5px 0 0 #00b029, 0 0.5px 0 #00b029, -0.5px 0 0 #00b029, 0 -0.5px 0 #00b029;
  
    
    
}

.showcase h2 {
    padding-top: 30vh;
    
    color:#fff;
    font-size: 40px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
    
    text-shadow: 1px 0 0 red, 0 1px 0 red, -1px 0 0 red, 0 -1px 0 red;

}
.showcase .btn {
    margin-top: 20px;
}

.showcase a:hover i {
    margin-left: 10px;
}

/* end showcase section */

/* home card section */

.home-card {
    display: grid;
    /*background: #00b029; */
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    justify-items: center;
    
    text-align: center;
    padding-top: 20px;
    color: #00b029;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
    
    /*background: radial-gradient(circle 100px, #56ab2f, #fff);*/ 
    

}

.home-card div {
    max-width: 300px;
    min-width: 240px;
    min-height: 300px;
    padding-top: 50px;
    box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
                inset -5px -5px 15px rgba(255, 255, 255, 0.2),
                5px 5px 15px rgba(0, 0, 0, 0.3),
                -5px -5px 15px rgba(255, 255, 255, 0.1);
    
    

}

.home-card i {
    margin-bottom: 20px;
    
}

.home-card p {
    margin: 0px 15px;
    letter-spacing: 1px;
}

.home-card h3 {
    margin-bottom: 5px;
}

.home-card a {
    display: inline-block;
    padding-top: 10px;
    color: #0067b8;
    text-transform: uppercase;
    font-weight: bold;
}

.home-card a:hover i {
    margin-left: 10px;
}


/* end home card section */

/* about */

.about {
    width:80%;
    margin: auto;
    padding-top: 50px;

}

.about-btn {
    cursor: pointer;
    display: inline-block;
    border: 0;
    font-weight: bold;
    margin-top: 20px;
    padding: 10px 20px;
    background: #00b029;
    color: #fff;
    font-size: 15px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
    border-radius: 10px;
}

.about-btn:hover {
    transform: scale(0.98);
}



/* end about */

/* Inv list section */

.list {
    max-width: 1500px;
    margin: auto;
    padding-top: 30px;
    

}

.list h1 {
    font-size: 30px;
    margin-bottom: 30px;
}

.list .list-item {
    
    margin: auto;
    max-width: 80%;
    padding: 15px;
    display: grid;
    grid-template-columns:40% 30% 30%;
    justify-content: center;
    border: #ccc solid 1px;   
    
}

.list .list-header {
    background: #00b029;
    border-top-left-radius:10px ;
    border-top-right-radius: 10px;
    color: #fff;
    padding-left: 30px;
}

.list .list-item:hover {
    background: rgb(240, 240, 240);
    transform: scale(1.05);
    
    border-radius: 10px;
    box-shadow: 5px 5px 15px rbga(0,0,0,0.6);


}

.list .list-header:hover {
    background: #00b029;
    transform: scale(1.0);
    
   

}

.list .list-item table tr td  {
    border-bottom: #ccc solid 1px;
    
    

}

.list .list-item table tr td:nth-child(odd) {
    text-transform: uppercase;
}

.list .list-item table tr td:nth-child(even) {
    padding-left: 15px;
    padding-right: 70px;
}

.list .list-item img {
    margin-top: 10px;
    margin-left: 20px;
    max-width: 200px;
    max-height: 150px;
}

/* End Inv List section */

/* Unit Content & Unit Auctions */

.unit-content {
    max-width: 1600px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    /*grid-gap: 20px;*/
    justify-items: center;
    text-align: center;
    padding-top: 20px;
    margin: auto;
}

.unit-auction {
    
    padding-top: 20px;
    font-size: 20px;
    max-width: 500px;
    
}

.unit-auction h1 {
    font-size: 25px;
}

.unit-auction-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap:10px;
    justify-items: left;
    align-items: center;
    margin-top: 40px;
 

}

.auction-contact {
    font-size: 18px;
    grid-column: 1/3;
    padding-top: 10px;
    
}

.unit-btn {
    cursor: pointer;
    display: inline-block;
    border: 0;
    font-weight: bold;
    padding: 5px 10px;
    background: #00b029;
    color: #000;
    font-size: 15px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
    border-radius: 5px;
}

.unit-btn:hover {
    transform: scale(0.98);
}

/* Tabs */
.tcontainer {
    max-width: 900px;
    margin: auto;

    overflow: hidden;
    
}

.tabs {
   /* background: var(--dark-color); */
    padding-top: 20px;
    
    max-width: 800px;
    margin: auto;

    border-bottom: 1px solid #000;

}

.tabs .tcontainer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /*grid-gap: 20px;*/    
    align-items: center;
    justify-content:center;
    text-align: center;
    

}

.tabs .tcontainer > div {
   padding: 25 0; 
   
}

.tab-border {
   /* border-bottom: var(--primary-color) 4px solid; */
   background-color: #b8fcc8;
   
}

.tab-item {
    border: 1px solid #3d3d3d;
    border-bottom: none;
    max-width: 300px;
    border-radius: 10px 10px 0px 0px;
    

}

.tab-content {
    padding: 20px 0;
    /*background: #00b029;*/
    display: grid;
    grid-template-columns:3fr 1fr;
    max-width: 800px;
    margin: auto;
   
}

#tab-1-content, 
#tab-2-content, 
#tab-3-content {
    display: none;
}


.tshow {
    display: block !important;
}


.tabs .tcontainer > div:hover {
    color: #00b029;
    cursor: pointer;
}

.tabs p {
    font-size: 18px;
    padding-top: 10px;
    
    
}

#tab-1-content .tab-1-content-inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    align-items: center;
    justify-content: center;
}

#tab-2-content .tab-2-content-inner {
    display: grid;
     /*grid-template-columns:repeat(2, 1fr);
    grid-gap: 20px; */
    align-items: center;
    justify-content: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 15px;
}

.tab-3-content img {
    width: 100%;
}

.table {
    
    margin-top: 2rem;
    border-collapse: collapse;
    border-spacing:0 ;

}

.table tbody tr td{
    color: #000;
    padding: 2px 25px;
    border: #000 solid 1px;
    border-right: #000 solid 2px;
}

.table tbody tr:nth-child(odd) {
    background: #b8fcc8;
}



.thead {
   
  font-size: 20px; 
  
}

.inv-side ul {
    margin-left: 30px;
    color: #fff;
}

.inv-side ul li {
    
    margin-top: 5px;
    padding: 5px 0px;
    text-align: center;
    background-color: #00b029;
    color: #fff;
    border: 1px solid #3d3d3d;
    border-radius: 5px;

}



.inv-btn li:hover {
    transform: scale(0.98);
}
/* End Tabs */

/* This is for the Inventory Image Galary */
.imgcont {
    min-width: 250px;
    max-width: 525px;
    min-height: 300px;
    margin: auto;
    border: #333 solid 3px;
    background: #333;

}

.imgs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /*grid-gap: 1px; */
    
    /*max-width: 70%;*/
    
}

.imgs img {
    border: #333 solid 1px;
}

/* fade in annimation */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.fade-in {
    opacity: 0;
    animation: fadeIn 0.5s ease-in 1 forwards;
}
.main-img img {
    width: 100%;
  
    }

.imgs img {
    width: 100%;
}
/* end img gallary section */

/* This is the inventory list page */
.container-i {

    display: flex;

 /* to aligh boxs
 align-items:flex-start;
 align-items:flex-end;
 align-items:center;
 align-items:streth (this is default);

 flex-direction: column;
 
 justify-content: flex-start;
 justify-content: flex-end;
 justify-content: center;
 justify-content: space-around; (margines in the out side boxs)
 justify-content: space-between; (margines between boxs)

 flex-wrap:wrap;  (this makes the box drop to the next line as the screen gets smaller)

 */
}

.container-i div {
    border:1px #ccc solid;
    padding:10px; 
}

/*  this sets the width of all flex box
.container-i-box {
    
    flex-basis: 25%;  
}

*/

.ibox1{
    flex: 1;
}

.ibox2 {
    flex: 1;
}

.ibox3 {
    flex: 1;
}

/* End Inventory list Section */
/*  Car section */
.carfeatures {
    
}

/*disclaimer */

.disclaim {
    max-width: 800px;
    margin: 20px auto;

}

.disclaim .disclaim-content {
    background: #b8fcc8;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px 10px 10px 15px;
    border: 1px solid #b8fcc8;
    border-radius: 10px;
}

/* end disclaimer */

/* count down */

.countdown, .countdown2, .countdown3, .countdown4, .countdown5, .countdown6, .countdown7 {
    color: #00b029;
    font-size: 20px;
}

/* fiance */



.finance {
    display: grid;
    width: 70%;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    justify-items: center;
    margin: auto;
    text-align: center;
    padding-top: 20px;
    
}

.finance i {
    padding-top: 20px;
}

.finance-head {
    
    
    grid-column: 1/4;
    padding: 20px 0 40px 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.30);

}

.finance-head h2 {
    font-size: 30px;
}

.finance-box1 {
    background:#b8fcc8;
    font-size: 25px;
    width:95%;
    color: #262626;
    min-height: 300px;
    box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
                inset -5px -5px 15px rgba(255, 255, 255, 0.2),
                5px 5px 15px rgba(0, 0, 0, 0.3),
                -5px -5px 15px rgba(255, 255, 255, 0.1);

    padding: 50px 20px 10px 20px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.45);

}

.finance-box1 a {
    color: #262626;
}

.finance-box2 {
    font-size: 25px;
    background: #2be156;
    width:95%;
    min-height: 300px;
    color: #3d3d3d;
    box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
    inset -5px -5px 15px rgba(255, 255, 255, 0.2),
    5px 5px 15px rgba(0, 0, 0, 0.3),
    -5px -5px 15px rgba(255, 255, 255, 0.1);
    padding: 50px 20px 10px 20px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.45);
    
}

.finance-box2 a {
    color: #3d3d3d;
}

.finance-box3 {
    font-size: 25px;
    background:#05d235;
    width:95%;
    min-height: 300px;
    color: #424141;
    box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
    inset -5px -5px 15px rgba(255, 255, 255, 0.2),
    5px 5px 15px rgba(0, 0, 0, 0.3),
    -5px -5px 15px rgba(255, 255, 255, 0.1);
    padding: 50px 20px 10px 20px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.45);
}

.finance-box3 a {
    color: #424141;
}


.finance-box4 {
    font-size: 25px;
    background:#06c733;
    width:95%;
    min-height: 300px;
    color: #424141;
    box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
    inset -5px -5px 15px rgba(255, 255, 255, 0.2),
    5px 5px 15px rgba(0, 0, 0, 0.3),
    -5px -5px 15px rgba(255, 255, 255, 0.1);
    padding: 50px 20px 10px 20px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.45);
}

.finance-box4 a {
    color: #424141;
}

.finance-box5 {
    font-size: 25px;
    
    text-align:left;
    
    
}

.finance-box5 p {
    line-height: 110%;
}

.finance-box4 img {
    
    max-height: 350px;
}

.finance-bottom  {
    grid-column: 1/4;
    margin: auto;
    display: flex;
    align-items: center;
}


/* end fiance */
/* finace form */




.financeflex {
    width: 70%;
    display: flex;
    margin: 25px auto;
    align-items: center;
    
    
}

.financetext {
     width: 600px;
}

.financetext img {
   
    margin: 10px 0;
    border-radius: 10px;
}

.finance-form {
    
    margin-top: 50px;
    width: 50%; 
    
    padding-left: 100px;   
}

.finance-form h2 {
    margin: 15px 0;
}

.form-ui {
    width: 300px;
    background-color: #5bc774;
    padding: 10px 27px;
    border-radius: 15px;
}

.form-control {
    margin: 5px 0;
        
}

.form-control p {
    font-size: 15px;
}

.form-ui h3 {
    font-size: 20px;
}

.form-control input {
    background-color:#c0f5cc ;
    width: 250px;
    font-size: 15px;
}

.form-btn {
    padding: 5px 15px;
    font-size: 20px;
    letter-spacing: 1px;
    color: #fff;
    border: none;
    background-color: #2be156;
    border-radius: 5px;
    box-shadow: 0 6px 0 0 #00b029;
    margin: 5px 0 10px 0;
}

 .form-btn:active {
    transform: translateY(5px);
    box-shadow: 0 2px 0 0 #00801e;
} 

/* end finance form */


/* calculator page only */

.cal {
    width:50%;
    margin: auto;
    justify-content: center;
    align-content: center;
}

/* end calculator */


/* contact */

.contact {
   width: 70%;
    margin: auto;
    align-content: center;
    justify-content: center;

}

.contact img {
    margin: 50px auto;
    border-radius: 15px;
}

.contact-head {
    
    padding-top: 50px;
    align-content: center;
    justify-content: center;
}

.contact-head img {
    border-radius: 15px;
}

.contact-head p {
    font-size: 20px;
}

.contact-head h1 {
    font-size: 30px;
}


.contact-table {
    
    margin-top: 2rem;
    border-collapse: collapse;
    border-spacing:0 ;
    

}


.contact-table tr td {
    color: #000;
    font-size: 20px;
    padding: 2px 25px;
   /*border: #000 solid 1px;
    border-right: #000 solid 2px; */
    align-content: center;
    justify-content: center;
}




/* end contact */

/* policy */

.policy {
    margin: 50px 175px;
}

/*footer */

.footer {
    margin-top: 100px;

}

.footer-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px 0 20px; 
    display: flex;
    align-items: center;
    justify-content: space-between;
 
 }
 
 .footer div {
     margin-bottom: 20px;
     display: flex;
     align-items: center;
 }
 
 .footer div i {
     margin-right: 10px;
 }
 
 .footer ul {
     display: flex;
     flex-wrap: wrap;
 }
 
 .footer li {
     margin-right: 30px;
     margin-bottom: 20px;
 }
 
/* end footer */

/* responsiveness */

@media (max-width: 1200px) {
    
    .main-nav h1 {
        padding-left: 5px;
        font-size: 30px;
    }



}

@media (max-width: 1030px) {
    
    .main-nav h1 {
        padding-left: 0px;
        font-size: 25px;
    }

    .main-nav ul li {
        font-size: 18px;
        padding: 0 5px;
    }

.unit-content {
    grid-template-columns: 1fr;
}

    .finance {
        grid-template-columns: repeat(2, 1fr);
    }

    .finance-box1 {
        font-size: 20px;
      }
    
      .finance-box2 {
        font-size: 20px;
      }

  .finance-box3 {
    font-size: 20px;
  }

  .finance-box4 {
    font-size: 20px;
  }

    .hide {
        display: none;
    }
    
   .list-item h2 {
       font-size: 20px;
   }
    .list .list-item table tr td:nth-child(even) {
        padding-left: 10px;
        padding-right: 20px;
    }

   /* #img2 {
        display: none;
    } */

}

@media (max-width: 830px){
    
    .main-nav {
        background: #fff;
    }
    
    .main-nav h1 {
        padding-left: 10px;
        font-size: 40px;
        color: black;
        
    }

    .main-nav .logo {
        width: 150px;
    }
   
    .menu-btn {
        display: block;
    }

    .menu-btn:hover {
        opacity: 0.5;
    }

    .main-nav ul.main-menu {
        display: block;
        position: absolute;
        top:0;
        left:0;
        background: #c0f5cc;
        
        width: 50%;
        height: 100%;
        
        border-right: #333 1px solid;
        opacity: 0.9;
        padding: 30px;
        transform: translateX(-500px);
        transition: transform 0.5s ease-in-out;
    }

    .main-nav ul.main-menu li {
        padding: 10px;
        color: #262626;
        border-bottom: #333 solid 1px;
        font-size: 14px;
    }

    .main-nav ul.main-menu li a {
        color: #000;
    }
    
    .main-nav ul.main-menu.show {
        transform: translateX(-20px);
    }
    .home-card {
        grid-template-columns: repeat(2, 1fr);
    }

    .showcase h2 {
        font-size: 35px;
        }

    .inv-side {
        display: none;
    }

    .finance-box1 {
        min-height: 200px;
        max-width: 250px;
        font-size: 15px;
        padding: 30px 20px 10px 20px;
        margin: 20px auto;
      }
    

  .finance-box3 {
    min-height: 200px;
    max-width: 250px;
    font-size: 15px;
    padding: 20px 20px 10px 20px;
    margin: 20px auto;
  }

  .finance-box4 {
    min-height: 200px;
    max-width: 250px;
    font-size: 15px;
    padding: 20px 20px 10px 20px;
    margin: 20px auto;
  }

  .finance-box5 {
    min-height: 200px;
    max-width: 250px;
    font-size: 15px;
    padding: 20px 20px 10px 20px;
    margin: 20px auto;
  }

.list .list-item {
    grid-template-columns:1fr; 

}

.list .list-item div {
    margin: auto;
    text-align:center;
}

.list .list-item table tr td:nth-child(even) {
    padding-left: 15px;
    padding-right:0px;
}

.list .list-item table {
    text-align: left;
    
}




}


@media (max-width: 700px){
    .financeflex {
        display: block;
        align-items: center;
    }
    .finance {
        display: inline;
    }


    .financetext {
        max-width: 400px;
        margin: 15px auto;
    }

    .finance-form {
        padding-left: 25px;
    }
}

@media (max-width: 510px){
    body {
        padding: 0 15px;
    }
    
    .home-card {
        grid-template-columns: 1fr;
    }

    .main-nav h1 {
         /*padding-left: 5px;
        font-size: 30px;*/
        display: none;
        
    }

    .financeflex {
        align-items: center;
    }

    .financetext {
        width: 250px;
        margin: 25px auto;
    }
    
    .form-control {
        width: 250px;
        margin: 25px auto;
    }
     /*.imgcont {
        width: auto;
        height: auto;
    } */

    .showcase h2 {
        font-size: 30px;
    }

    .main-nav .logo {
        width: 250px;
    }

    .finance-box1 {
        min-height: 150px;
        font-size: 15px;
        padding: 20px 10px 10px 10px;
      }
    

  .finance-box3 {
    min-height: 150px;
    font-size: 15px;
    padding: 10px 20px 10px 20px;
  }

  .finance-box4 {
    min-height: 150px;
    font-size: 15px;
    padding: 10px 20px 10px 20px;
  }

  .finance-form {
    padding-left: 10px;
}
  
  .list .list-item {
    grid-template-columns:1fr;
    
}

.list .list-item div {
    margin-top: 15px;
}

.contact-table tr td {
    font-size: 20px;
    padding: 2px 0px;
   
}


}